import { styled } from "styled-components";

export const HeaderRighWrapper = styled.div`
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin-right: 24px;
  color: ${props => props.theme.text.primaryColor};
  .btns{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 5px;

    .btn {
      width: 50px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-sizing: border-box;
      &:hover {
        transition: box-shadow 200ms ease;
        border: 1px solid #ccc;
        border-radius: 25px;
        /* x y 溅射 颜色 */
        box-shadow: 0px 2px 4px rgba(0,0,0,.18);
      }
    }
  }

  .profile{
    position: relative;
    .inner-conter{
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      cursor: pointer;
      width: 80px;
      height: 40px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 25px;
      /* 将一个重复调用的样式封住起来 */
      color: ${props => props.theme.text.primaryColor};
      ${props => props.theme.mixin.boxShadow};
    }

    .panel{
      position: absolute;
      right: 0;
      top: 60px;
      box-sizing: border-box;
      width: 240px;
      /* padding: 0 18px; */
      border: 1px solid #eee;
      box-shadow: 0 0 4px rgba(0,0,0,.20);
      border-radius: 5px;
      .top,.bot{
        padding: 10 0px; 
        .item {
          box-sizing: border-box;
          height: 40px;
          line-height: 40px;
          padding: 0 12px;
          cursor: pointer;
          &:hover{
            background-color: #f5f5f5;
          }
        }
      }
      .top{
        border-bottom: 1px solid #eee;
      }
      
    }
    
    
  }
`